MIS2000Lab.的「HTML5 認證考試，從零開始」#2--開發工具與我的第一個HTML5網頁

DAY 2

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 2 篇

網頁鐵人賽開發工具 html5 初學者 frontpage visual studio mis2000lab vs 2013 dreamweaver

mis2000lab

2014-09-27 00:15:14

11812 瀏覽

分享至

上一篇文章 http://ithelp.ithome.com.tw/question/10156737

==== HTML5開發工具 (免費下載) ====

您可以用任何文字編輯器、網頁編輯器來寫HTML5網頁
但免費、功能又強大的，還是「微軟Visual Studio」

目前是VS 2013，有免費版可以下載 VS 2013 Express for Web（專寫網頁的）
由此下載，http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

再來：http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/21/free_download_expression_web_4_sp2.aspx

您最好安裝新版本的瀏覽器
多安裝幾套，除了IE以外，Chrome、FireFox、Opera最好都裝上

您寫好的網頁，可能在不同瀏覽器會看到不少的差異
(HTML5仍是一個正在發展中、時時刻刻都在成長的技術、規範。
瀏覽器也一直更新、改版本，不是嗎？.......差異是必然的，要有心理準備)

我們設計網頁的時候，不知道用戶是哪一種瀏覽器，所以請多多測試、多測試幾個版本（廠牌）

這裡有個網站，可以簡單測試您的瀏覽器「支援HTML5」的程度，會評分喔！
請看 http://www.dotblogs.com.tw/mis2000lab/archive/2012/05/16/browser_html5.aspx

==== 還在用過氣的網頁編輯器？ (免費下載) ====

我慣用FrontPage，但這套微軟的軟體在Office 2003以後就失蹤了
它被歸納到另一套工具內，但這套Microsoft Expression Studio也.....

好在微軟有免費、公開新版FrontPage給大家下載喔，真是佛心來著

[免費下載]FrontPage新版 -- Microsoft Expression Web 4 (Free Version)與 SharePoint Designer 2013
請看 http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/21/free_download_expression_web_4_sp2.aspx

我建議各位使用最新版的 Visual Studio
針對 HTML5 / jQuery / JavaScript / CSS等等，都有智慧選字系統（Intellisense）
而且有高亮度（highlight）來區別程式碼

最新版本真的好用很多，不要去考古（找舊版本來害自己啦！）

微軟號稱Visual Studio是當代最強的網頁、程式開發工具，自有他的一套！
（抱歉，我是微軟MVP，得幫忙抬轎 *^_^*）

Adobe當然也是一等一的好軟體，
但他實在好貴，而且今天的新聞似乎傳出不利消息（2014/9/26）

Adobe關閉中國研發部門，遣散逾300名員工
http://www.ithome.com.tw/news/91117

摘錄如下：
Adobe表示，從2012年以來便已將全球的技術基地從80個縮減至56個，期望數量更少的技術團隊可創造更大的效率與即時協作，此次只是Adobe裁減技術基地策略的一部份，並不會影響Adobe全球的員工佈局或是在研發上的投資。原本在中國的研發與技術任務將轉由其他技術基地負責。

==== 我的第一個HTML5網頁 ====

HTML5網頁裡面（最上方）的第一列就是 ****

以前的版本（如HTML4.01），您會在網頁開頭看到其他的DOCTYPE寫法：

還有好幾種不同的寫法

後續的與沒什麼大改變

我喜歡稱這些<HTML符號>為「標籤」，HTML tag
但很多書本裡面，英文都稱為元素（Element）。

舉例來說：
<p>您好，這是一段文字</p>

前後的<p>...</p>區塊就是開始與結束元素（Element）
中間的文字，稱為內容（Content）

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20140927/201409270011375425903952fea_resize_600.jpg[/img]

我自己並沒有認真背誦、記憶HTML標籤，

我是用FrontPage、DreamWeaver這種網頁編輯器
先做出來，然後看看他幫我翻譯的HTML原始碼

看久了，常用的就會熟悉了
我只打算介紹HTML5新增的、特有的東西，傳統（舊）HTML既有的標籤（元素），在此不贅述

在這裡要表揚一下微軟（認證考試）原廠教材！
他的教材編排是一種交錯式的寫法，
例如他先寫HTML常用標籤、CSS常用屬性

把基本的學完以後，後面又出現HTML5 / CSS3的章節
這時候，只教「新的東西」了，舊的不提

這也是一種**「堆積木」的教學法，**
打好基礎以後，新功能慢慢加上去，大家學得輕鬆、但能力很扎實！

.............................................................
如果您想線上學習HTML標籤（元素）
.............................................................
這個網站一定要來看！ http://www.w3schools.com/html/default.asp

每一個標籤、每一個屬性、每一種用法與變化
他都提供範例讓大家立即觀看、改了就看見結果

這種學習方法，只要花時間就能學會
也就是我說的**「小範例最強」理論！**

把每一個小關鍵都弄懂了，就能學會。
一開始，不要看大範例，裡面太複雜，初學者容易迷路。

為了SEO，搜尋引擎最佳化

HTML5裡面用<h1>、<h2>......<h6>來區分文字標題

可以參閱 http://pydoing.blogspot.tw/2012/01/html-5-heading.html

也持用項目清單，例如<ul>、<li>來做
您看到很多新的網頁套件，裡面甚至都用<div>搭配CSS搞定，

HTML碼很簡潔，因為很多東西都寫在CSS裡面了。

可以參閱 http://www.dotblogs.com.tw/mis2000lab/Tags/Bootstrap/default.aspx

[img=415,360]http://ithelp.ithome.com.tw/upload/images/20140927/20140927001324542590a4e0032_resize_600.jpg[/img]

以本範例的巢狀結構來說，<ol>不建議放在<ul>底下，而<dl>也不建議放在<ol>底下。

因此Visual Studio會在HTML標籤下以「綠色虛線」來警示您。
這並非語法錯誤而是一種警告，告訴您「不建議」這樣做。

如果您想知道我是怎麼自我學習（自修）？
怎麼買書練習？

可以參閱這幾篇文章：

[給初學者的話]挑書與買書，買適合自己的書（電腦書、程式設計入門書）
http://www.dotblogs.com.tw/mis2000lab/archive/2010/11/15/choice_your_style_choice_good_book_for_yourself.aspx

[給初學者的話] IT世界裡面，沒有一本搞定的「初學者聖經」
http://www.dotblogs.com.tw/mis2000lab/archive/2008/07/14/4490.aspx

只看書、不動手，一無所成！
[學習之道] 修福不修慧，大象披瓔珞；修慧不修福，羅漢托空缽 (學習寫程式，只靠補習上課嗎？)
http://www.dotblogs.com.tw/mis2000lab/archive/2014/09/17/learning-and_do-it_20140917.aspx

想走網頁程式設計師**（後端、資料庫程式）**，可以參考
http://www.dotblogs.com.tw/mis2000lab/archive/2008/06/18/4323.aspx

***********************************************

不要走開，馬上回來

下一篇文章：http://ithelp.ithome.com.tw/question/10156981

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯